@import "./segment";
@import "./segment.md.vars";

// Material Design Segment
// --------------------------------------------------

:host {
  --background: #{$segment-button-md-background};
  --background-checked: #{$segment-button-md-background-checked};
  --background-hover: #{$segment-button-md-background-hover};
  --background-activated: #{$segment-button-md-background-activated};
  --color: #{$segment-button-md-text-color};
  --color-checked: #{$segment-button-md-text-color-checked};
  --color-checked-disabled: var(--color-checked);
  --indicator-color: transparent;
}

:host(.segment-disabled) {
  opacity: $segment-md-opacity-disabled;
}

// Segment: Color
// --------------------------------------------------

:host(.ion-color)::slotted(ion-segment-button) {
  --background-hover: #{current-color(base, .04)};
  --background-activated: #{current-color(base, .16)};
  --ripple-color: #{current-color(base)};

  background: transparent;
  color: $segment-button-md-text-color;
}

:host(.ion-color)::slotted(.segment-button-checked) {
  --indicator-color-checked: #{current-color(base)};
  color: #{current-color(base)};
}

:host(.ion-color)::slotted(.segment-button-checked.activated) {
  color: #{current-color(base)};
}


// Segment: Default Toolbar
// --------------------------------------------------

:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
  color: #{var(--ion-toolbar-color-unchecked, var(--color))};
}

:host-context(ion-toolbar):not(.ion-color)::slotted(.segment-button-checked) {
  --indicator-color-checked: #{var(--ion-toolbar-color-checked, var(--color-checked))};

  color: #{var(--ion-toolbar-color-checked, var(--color-checked))};
}


// Segment: Toolbar Color
// --------------------------------------------------

:host-context(ion-toolbar.ion-color):not(.ion-color)::slotted(ion-segment-button) {
  --background-hover: #{current-color(contrast, .04)};
  --background-activated: #{current-color(base)};
  --color: #{current-color(contrast, .6)};
  --color-checked: #{current-color(contrast)};
  --indicator-color-checked: #{current-color(contrast)};
}
